<template>
  <div class="on-click-outside">
    <div ref="target">
      Hello World
    </div>
    <div>外部元素</div>
  </div>
  <div ref="ignoreRef" class="ignore-box"></div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { onClickOutside } from "@vueuse/core";

defineOptions({
  name: "OnClickOutside"
})

const target = ref<HTMLElement | null>(null)
const ignoreRef = ref<HTMLElement | null>(null)
onClickOutside(target, (event) => {
  console.log('click outside:', event.composedPath())
}, {
  ignore: ['.ignore-box']
  // ignore: [ignoreRef]
})
</script>

<style scoped lang="css">
.on-click-outside {

}
.ignore-box {
  width: 300px;
  height: 300px;
  background-color: pink;
}
</style>
